<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>{{info}}</h1>
    <input type="text" placeholder="用户名" v-model="user.username">
    <input type="text" placeholder="密码" v-model="user.password">

    <input type="button" value="get请求" @click="f1()">
    <input type="button" value="post请求" @click="f2()">
</div>
<!--引入Vue框架-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
  let v=new Vue({
           el:"body>div",
           data:{
               info:"Hello Axios",
               user:{
                   username:"",
                   password:""
               }

           },
           methods:{
               f1(){
                   //alert("xxx")
                   //发出异步的get请求 请求完之后调用then里面的方法
                   //response代表响应,服务器响应的数据从对象中过去
                   axios.get("/helloAxios?info=abc&msg=xyz").then(function (response){
                       //弹出服务器响应的数据
                       //respond.data代表服务器Controller中return的内容
                       alert(response.data)

                   });
               },
               f2(){
                   //发出异步post请求,将data里面的自定义user对象传递给服务器
                   axios.post("/postAxios",v.user).then(function (response){
                       //alert(response.data)
                       v.info=response.data;
                   });
               }

           }
       })
</script>
</body>
</html>